<template>
  <up-tabbar class="custom-tabbar" :value="activeTab" @change="changeTab" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
    <up-tabbar-item text="首页" name="index">
      <template #active-icon>
        <image src="/static/tabBar/index-active.png" style="width: 24px; height: 24px;"></image>
      </template>
      <template #inactive-icon>
        <image src="/static/tabBar/index.png" style="width: 24px; height: 24px;"></image>
      </template>
    </up-tabbar-item>

    <!-- 中间凸出按钮 -->
    <up-tabbar-item text="展览厅" mode="midButton" name="center">
      <template #active-icon>
        <view class="center-button">
          <image src="/static/tabBar/category-active.png" style="width: 30px; height: 30px;"></image>
        </view>
      </template>
      <template #inactive-icon>
        <view class="center-button">
          <image src="/static/tabBar/category.png" style="width: 30px; height: 30px;"></image>
        </view>
      </template>
    </up-tabbar-item>
    <up-tabbar-item text="我的" name="user">
      <template #active-icon>
        <image src="/static/tabBar/user-active.png" style="width: 24px; height: 24px;"></image>
      </template>
      <template #inactive-icon>
        <image src="/static/tabBar/user.png" style="width: 24px; height: 24px;"></image>
      </template>
    </up-tabbar-item>
  </up-tabbar>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 定义组件属性
const props = defineProps({
  active: {
    type: [Number, String],
    default: 0
  }
})

// 定义组件事件
const emit = defineEmits(['change'])

// 当前激活的tab
const activeTab = ref(props.active)

// tab切换事件
const changeTab = (index) => {
  activeTab.value = index;
  if (index === "center") {
    uni.switchTab({
      url: '/pages/gallery/index'
    });
  } else if (index === "index") {
    uni.switchTab({
      url: '/pages/index/index',
    });
  } else if (index === "user") {
    uni.switchTab({
      url: '/pages/user/index'
    });
  }
  emit('change', index);
}
</script>

<style scoped>
/* 自定义tabbar样式 */
.custom-tabbar {
  /* position: relative;
  overflow: visible;
  height: 100%; */
}

/* 中间凸出按钮样式 */
.center-tab {
  /* position: absolute; */
  /* top: -15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999; */
}

.center-button {
  z-index: 9999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* background: #fff; */
}
</style>